<!-- Important Owl stylesheet -->
<link rel="stylesheet" href="<?php echo $this->basePath(); ?>/templates/front/css/owl.carousel.css">

<!-- Default Theme -->
<link rel="stylesheet" href="<?php echo $this->basePath(); ?>/templates/front/css/owl.theme.css">

<!-- Include js plugin -->
<script src="<?php echo $this->basePath(); ?>/templates/front/js/owl.carousel.js"></script>
<link rel="stylesheet" type="text/css"
      href="<?php echo $this->basePath(); ?>/templates/front/js/fancybox/helpers/jquery.fancybox-buttons.css"
      media="screen"/>
<link rel="stylesheet" type="text/css"
      href="<?php echo $this->basePath(); ?>/templates/front/js/fancybox/helpers/jquery.fancybox-thumbs.css"
      media="screen"/>
<link rel="stylesheet" type="text/css"
      href="<?php echo $this->basePath(); ?>/templates/front/js/fancybox/jquery.fancybox.css" media="screen"/>
<script src="<?php echo $this->basePath(); ?>/templates/front/js/fancybox/helpers/jquery.fancybox-buttons.js"></script>
<script src="<?php echo $this->basePath(); ?>/templates/front/js/fancybox/helpers/jquery.fancybox-media.js"></script>
<script src="<?php echo $this->basePath(); ?>/templates/front/js/fancybox/helpers/jquery.fancybox-thumbs.js"></script>


<?php
$permission = \Velacolib\Utility\Utility::checkPermission($topics->user_id);
$utility = new \Velacolib\Utility\Utility();
$user_info = \Velacolib\Utility\Utility::GetUserInfo($topics->user_id, 'Admin\Model\AdminUserTable');
$userContact = $this->userContact;
$user = Velacolib\Utility\Utility::GetUserInfo($topics->user_id, 'Admin\Model\AdminUserTable');
$translator = \Velacolib\Utility\Utility::translate();
$mobileDetect = new \Frontend\Helper\MobileDetect();
$this->doctype(Zend\View\Helper\Doctype::XHTML1_RDFA);
//$this->headMeta()->appendProperty('og:title', 'my article title');
$this->headTitle($topics->title);
 /** facebook open graph */
$this->headMeta()->appendName('Description', strip_tags($topics->full_description) );
$this->headMeta()->appendName('keywords', strip_tags($topics->title) );
$this->headMeta()->appendProperty( 'og:image',ROOT.$topics->images);
$this->headMeta()->appendProperty('og:title', $topics->title);
//echo $this->headMeta();
/** end fb open graph */

?>
<?php
/**
 * mobile content
 * no related article ....
 **/
if ($mobileDetect->isMobile()): ?>


    <style>
        #fancybox-wrap {
            width: 100% !important;
            height: auto !important;
            top: 362px;
            left: 0px !important;
            opacity: 1;
        }

        #fancybox-content {
            width: 100% !important;
            height: auto !important;
        }
    </style>
    <div class="page-header" id="banner">
        <form action="/" method="get" name="search_form" id="">
            <div class="row" style="">
                <div class="col-lg-4 col-sm-4 col-md-4" style="margin-top: 5px">
                    <input type="text" id="search-input" name="search_val" class="form-control" placeholder="Tìm kiếm">

                    <div class="loading_absolute">&nbsp</div>
                </div>
                <div class="col-lg-4 col-sm-4 col-md-4" style="margin-top: 5px">
                    <select class="form-control" name="search_cat">
                        <option value="0">Tất cả</option>
                        <?php $cat = Velacolib\Utility\Utility::getCategoryArray(); ?>
                        <?php foreach ($cat as $key_cat => $val_cat) { ?>
                            <option value="<?php echo $val_cat->id ?>"><?php echo $val_cat->title ?></option>
                        <?php } ?>
                    </select>
                </div>
                <div class="col-lg-4 col-sm-4 col-md-4" style="margin-top: 5px">
                    <div class="input-group">
                        <select class="form-control" name="search_loc">
                            <?php $loc = Velacolib\Utility\Utility::getLocationArray(); ?>
                            <?php foreach ($loc as $k => $c) { ?>
                                <option value="<?php echo $k ?>"><?php echo $c ?></option>
                            <?php } ?>
                        </select>
                    <span class="input-group-btn">
                      <button class="btn btn_purple btn_purple" id="send" value="Tìm"
                              type="submit"><?= $translator->translate('Search') ?></button>
                    </span>
                    </div>
                </div>
            </div>
            <div class="row" style="margin: 10px">
                <label class="checkbox-inline">
                    <input type="radio" name="search_type" id="inlineCheckbox2"
                           value="0"> <?= $translator->translate('Sell') ?>
                </label>
                <label class="checkbox-inline">
                    <input type="radio" name="search_type" id="inlineCheckbox1"
                           value="1"> <?= $translator->translate('Buy') ?>
                </label>

            </div>
        </form>
    </div>
    <div class="content-body">
        <div class="topic_detail">

            <div class="row" id="topic-image ">
                <div class="row vela-col">
                    <div class="col-lg-9 col-md-9 col-sm-9">
                        <div class="topic_detail_title">

                            <?php echo Velacolib\Utility\Utility::getProductType($topics->topic_type) . ' - ' . $topics->title; ?>
                        </div>
                        <div class="topic_navigation">
                            <a class="text-info"
                               href="/?search_loc=<?php echo $topics->topic_location; ?>">  <?php echo Velacolib\Utility\Utility::getLocationArray($topics->topic_location); ?></a>
                            <?php if ($topics->cat_id) { ?>
                                <a class="text-info" href="/?search_cat=<?php echo $topics->cat_id; ?>">
                                    - <?php $topic_cat = Velacolib\Utility\Utility::getTopicCat()->getCategories($topics->cat_id);
                                    echo $topic_cat->title; ?></a>
                            <?php } ?>
                        </div>

                        <div id="owl-demo" class="owl-carousel" style="margin: 10px 0px 20px 0px">
                            <?php foreach ($image as $img): ?>
                                <a class="fancybox-button" data-fancybox-group="button" rel="example_group"
                                   href="<?php echo $img->link; ?>">
                                    <img class="owl_img" title="<?=$topics->title?>" alt="<?=$topics->title?>"
                                                                          src="<?php echo $img->link; ?>"> </a>
                            <?php endforeach ?>
                        </div>

                        <div class="topic_content">
                            <?php echo html_entity_decode($topics->full_description); ?>
                            <?php if ($topics->topic_type == 0): ?>
                                <div class="i_price">
                                    <?php
                              $price =      $utility::showPrice($topics->price,$topics->show_price);
                                    echo $price;
                                    ?>

                                </div>
                            <?php endif ?>
                        </div>
                        <!-- content topic -->


                    </div>
                    <div class="col-lg-3 col-md-3 col-sm-3" style="text-align: center">
                        <?php $auth = $utility::isLogin();
                        if ($auth) {
                            if ($auth->email == $topics->email) {
                                ?>
                                <button type="button" class="btn btn_purple"
                                        onclick="uptin(<?= $topics->topicid ?>)"><?= $translator->translate('Refresh topic') ?>  </button>
                            <?php
                            }
                        }

                        ?>

                        <div class="row topic-user-profile">
                            <div class="col-lg-12 col-sm-12 col-md-12 vela-col">
                                <h4><a href="#" id="action_profile" dataset="<?= $topics->user_id ?>"
                                       data-toggle="modal" data-target="#modal_profile"><?php echo $topics->name ?></a>
                                </h4>
                                <small><cite title="San Francisco, USA"><?php echo $topics->address ?>
                                        <i
                                            class="glyphicon glyphicon-map-marker">
                                        </i></cite>
                                </small>
                                <p>
                                    <span class="contact">Liên hệ qua</span>
                                    <br/>
                                    <a data-target="#contact" data-toggle="modal" class="btn btn_purple">Email</a>
                                    <br/>
                                    <span class="contact">Hoặc gọi</span>
                                    <br/>

                                <div id="phone_area">
                                    <a href="tel:<?= $topics->phone ?>"  class="btn btn_purple">Phone</a>
                                </div>
                                <br/>
                                <i class="glyphicon glyphicon-time"></i>
                                <?php echo Velacolib\Utility\Utility::time_stamp($topics->create_date); ?>
                                </p>

                            </div>
                        </div>
                    </div>
                </div>


            </div>
        </div>
    </div>
    <!-- topic detail -->


    <div class="row vela-col">
        <div class="col-lg-9 col-sm-9 col-md-9 vela-col">

        </div>
        <!-- left -->
        <div class="col-lg-3 col-sm-3 col-md-3 vela-col">

        </div>
        <!-- sidebar right -->
    </div>
    </div>
    <!-- modal form contact -->
    <div class="modal fade" id="contact" tabindex="-1" role="dialog" aria-labelledby="contactLabel" aria-hidden="true">

        <div class="modal-dialog">
            <div class="panel panel-primary">
                <div class="panel-heading">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                    <h4 class="panel-title" id="contactLabel"><span
                            class="glyphicon glyphicon-send"></span> <?= $topics->name ?> </h4>
                </div>
                <form action="/raovat/email-to-author" id="email_to_author" method="post" accept-charset="utf-8">
                    <div class="modal-body" style="padding: 5px;">
                        <div class="row">
                            <div class="col-lg-12 col-md-12 col-sm-12" style="padding-bottom: 10px;">
                                <input class="form-control" name="name" placeholder="H? tên" type="text" required/>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-lg-12 col-md-12 col-sm-12" style="padding-bottom: 10px;">
                                <input class="form-control" name="email" placeholder="E-mail" type="email" required/>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-lg-12 col-md-12 col-sm-12" style="padding-bottom: 10px;">
                                <input class="form-control" name="subject" placeholder="Subject" type="text" required
                                       value="<?= $topics->title ?>"/>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-lg-12 col-md-12 col-sm-12">
                                <textarea style="resize:vertical;" class="form-control" placeholder="Message..."
                                          rows="6" name="content" required></textarea>
                            </div>
                            <input type="hidden" name="recipient_name" value="<?= $topics->name ?>">
                            <input type="hidden" name="recipient_email" value="<?= $topics->email ?>">
                        </div>
                    </div>
                    <div class="panel-footer" style="margin-bottom:-14px;">
                        <input type="submit" class="btn btn_purple" value="Gửi"/>
                        <!--<span class="glyphicon glyphicon-ok"></span>-->
                        <input type="reset" class="btn btn_purple" value="Làm lại"/>
                        <!--<span class="glyphicon glyphicon-remove"></span>-->
                        <button style="float: right;" type="submit" class="btn btn-default btn-close"
                                data-dismiss="modal"><?= $translator->translate('Close') ?></button>
                    </div>
                </form>
            </div>
        </div>
    </div>
    <!-- end modal form contact -->
    <div class="modal fade" id="modal_profile" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
         aria-hidden="true">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                    <h4 class="modal-title" id="myModalLabel"><img class="user_avatar"
                                                                   src="<?= $topics->avatar ?>"/>  <?= $topics->name ?>
                        <small><?= $topics->address ?></small>
                    </h4>
                </div>
                <div class="modal-body" id="content_usertopic">

                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div> <!-- #/myModal -->
    </div>

    <script type="text/javascript" src="<?php echo $this->basePath(); ?>/templates/front/js/masonry.js"></script>
    <script type="text/javascript"
            src="<?php echo $this->basePath(); ?>/templates/front/js/masonry.pkgd.min.js"></script>
    <script>
        function getphone(id) {

            $.ajax({
                type: 'post',
                url: '/raovat/creImagePhone',
                dataType: 'html',
                data: {id: id},
                success: function (data) {
                    var img = '<img src="/img/phone/' + data + '" />';
                    $("#phone_area").html("");
                    $("#phone_area").append(img);
                }
            })
        }
        ;
    </script>
    <script type="text/javascript">

        $("form#email_to_author").submit(function () {
            var formName = $(this).attr('name');

            $.ajax({
                url: $(this).attr('action'),
                type: 'POST',
                data: $(this).serialize(),
                dataType: 'html',
                beforeSend: function () {
                    $(".loading").show();
                },
                success: function (response) {
                    //alert(response);
                    $(".loading").hide();
                    response = JSON.parse(response);
                    console.log(response);
                    jsuccess(response.message);
                    $("#contact").modal('hide');


                },
                error: function () {

                    jerror('Request timeout');
                }

            });
            return false;
        });


        function uptin(id_tin) {
            $.ajax({
                type: 'post',
                url: '/raovat/uptopic',
                dataType: 'html',
                data: {id: id_tin},
                beforeSend: function () {

                }, success: function (response) {
                    response = JSON.parse(response);
                    if (response.result) {
                        jsuccess(response.message);
                    } else {
                        jerror(response.message);
                    }
                }
            })

        }
        ;

        $(document).ready(function () {

            $("#owl-demo").owlCarousel({
                lazyLoad: true,

                singleItem: true,
                autoHeight: true,
                lazyLoad: true,
                navigation: false
            });
            /*  $(".owl_img").elevateZoom({
             zoomType				: "inner",
             cursor: "crosshair"
             });
             */


        });
        $(window).load(function () {
            /*  var container = document.querySelector('#row_topic');
             var msnry = new Masonry(container, {
             // options
             itemSelector: '.tp-img-item'

             });*/

            $("a[rel=example_group]").fancybox({

                openEffect: 'none',
                closeEffect: 'none',

                prevEffect: 'none',
                nextEffect: 'none',

                closeBtn: false,

                helpers: {
                    title: {
                        type: 'inside'
                    },
                    buttons: {}
                }

                /* onClosed: function() {
                 $('body').css('background',"#eee url('../images/b5.png') repeat");
                 }            */

            });

        });

    </script>

    <script src="<?php echo $this->basePath(); ?>/templates/front/js/fancybox/jquery.mousewheel-3.0.6.pack.js"></script>
<?php
else :

    /** desktop content
     *  full option
     *
     *
     *
     *
     *
     *
     *
     *
     */
    ?>
    <div class="page-header" id="banner">
        <form action="/" method="get" name="search_form" id="">
            <div class="row" style="">
                <div class="col-lg-4 col-sm-4 col-md-4" style="margin-top: 5px">
                    <input type="text" id="search-input" name="search_val" class="form-control" placeholder="Tìm kiếm">

                    <div class="loading_absolute">&nbsp</div>
                </div>
                <div class="col-lg-4 col-sm-4 col-md-4" style="margin-top: 5px">
                    <select class="form-control" name="search_cat">
                        <option value="0"><?= $translator->translate('all'); ?></option>
                        <?php $cat = Velacolib\Utility\Utility::getCategoryArray(); ?>
                        <?php foreach ($cat as $key_cat => $val_cat) { ?>
                            <option value="<?php echo $val_cat->id ?>"><?php echo $val_cat->title ?></option>
                        <?php } ?>
                    </select>
                </div>
                <div class="col-lg-4 col-sm-4 col-md-4" style="margin-top: 5px">
                    <div class="input-group">
                        <select class="form-control" name="search_loc">
                            <?php $loc = Velacolib\Utility\Utility::getLocationArray(); ?>
                            <?php foreach ($loc as $k => $c) { ?>
                                <option value="<?php echo $k ?>"><?php echo $c ?></option>
                            <?php } ?>
                        </select>
                    <span class="input-group-btn">
                      <button class="btn btn_purple btn_purple" id="send" value="Tìm"
                              type="submit"><?= $translator->translate('Search') ?></button>
                    </span>
                    </div>
                </div>
            </div>
            <div class="row" style="margin: 10px">
                <label class="checkbox-inline">
                    <input type="radio" name="search_type" id="inlineCheckbox2"
                           value="0"> <?= $translator->translate('Sell') ?>
                </label>
                <label class="checkbox-inline">
                    <input type="radio" name="search_type" id="inlineCheckbox1"
                           value="1"> <?= $translator->translate('Buy') ?>
                </label>

            </div>
        </form>
    </div>
    <div class="content-body">
        <div class="topic_detail">

            <div class="row" id="topic-image ">
                <div class="row vela-col">
                    <div class="col-lg-9 col-md-9 col-sm-9">
                        <div class="col-lg-12 col-md-12 col-sm-12">
                        <div class="topic_detail_title">
                            <?php echo Velacolib\Utility\Utility::getProductType($topics->topic_type) . ' - ' . $topics->title;?>
                        </div>
                        <div class="topic_navigation">
                            <a class="text-info"
                               href="/?search_loc=<?php echo $topics->topic_location; ?>">  <?php echo Velacolib\Utility\Utility::getLocationArray($topics->topic_location); ?></a>
                            <?php if ($topics->cat_id) { ?>
                                <a class="text-info" href="/?search_cat=<?php echo $topics->cat_id; ?>">
                                    - <?php $topic_cat = Velacolib\Utility\Utility::getTopicCat()->getCategories($topics->cat_id);
                                    echo $topic_cat->title; ?></a>
                            <?php } ?>
                        </div>

                        <div id="row_topic">

                            <?php foreach ($image as $img): ?>
                                <div class="thumbnail tp-img-item">
                                    <a rel="example_group" data-fancybox-group="button"
                                       title="<?php echo $topics->title . '  <b>' . ($topics->price) . ' VND</b> ' ?>"
                                       href="<?php echo $img->link; ?>">
                                        <img style="width: 160px" alt="<?=$topics->title?>" title="<?=$topics->title?>" src="<?php echo $img->link; ?>" ">
                                    </a>
                                </div>
                            <?php endforeach ?>

                        </div>
                        <!-- image topic -->
                        <div class="topic_content">
                            <?php echo (html_entity_decode($topics->full_description)); ?>
                            <?php if ($topics->topic_type == 0): ?>
                                <div class="i_price">

                                    Giá bán:  <?php
                                    $price =      $utility::showPrice($topics->price,$topics->show_price);
                                    echo $price;
                                    ?>

                                </div>
                            <?php endif ?>
                            <div class="share_this" style="">
                                <a href="https://www.facebook.com/sharer/sharer.php?u=<?php echo 'http://'.$_SERVER['HTTP_HOST'] ?>/raovat/chitiet/<?php echo $topics->slug ?>/<?= $topics->topicid; ?>" target="_blank">
                  <span style="background-image: url(<?=ROOT.'templates/front/images/facebook_32.png'?>);display: inline-block;
height: 32px;width: 32px;position: relative;"></span>
                                </a>
                                <a href="https://twitter.com/home?status=<?php echo 'http://'.$_SERVER['HTTP_HOST'] ?>/raovat/chitiet/<?php echo $topics->slug ?>/<?= $topics->topicid; ?>" target="_blank">
                                    <span style="background-image: url(<?=ROOT.'templates/front/images/twitter_32.png'?>);display: inline-block;height: 32px;width: 32px;position: relative;"></span>
                                </a>

                            </div>
                        </div>
                        <!-- content topic -->
                               </div>
                        <div class="col-lg-12 col-sm-12 col-md-12 vela-col">
                            <label class="topic_detail_title">Sản phẩm liên quan</label>

                            <div class="col-lg-12 col-sm-12 col-md-12 vela-col">

                                <div id="owl-demo" class="owl-carousel">
                                    <?php foreach ($related_products as $related): ?>
                                        <div class="item">
                                            <div style="height: 150px;overflow: hidden">
                                                <a href="/raovat/chitiet/<?= $related->slug ?>/<?= $related->id ?>">
                                                    <img alt="<?=$related->title?>" title="<?=$related->title?>" style="width: 160px;min-height: 150px" src="<?= $related->thumb ?>"/>
                                                </a>
                                            </div>
                                            <div class="related_title"><a
                                                    href="/raovat/chitiet/<?= $related->slug ?>/<?= $related->id ?>"><?php echo $related->title; ?></a>
                                            </div>
                                            <div class="related_price">
                                                <?php
                                                $price =      $utility::showPrice($related->price,$related->show_price);
                                                echo $price;
                                                ?>
                                            </div>
                                        </div>
                                    <?php endforeach; ?>

                                </div>
                            </div>
                            <!-- bai viet lien quan -->
                        </div>

                    </div>
                    <div class="col-lg-3 col-md-3 col-sm-3" style="text-align: center">
                        <?php $auth = $utility::isLogin();
                        if ($auth) {
                            if ($auth->email == $topics->email) {
                                ?>
                                <button type="button" class="btn btn_purple"
                                        onclick="uptin(<?= $topics->topicid ?>)"><?= $translator->translate('Refresh topic') ?>  </button>
                            <?php
                            }
                        }

                        ?>

                        <div class="row topic-user-profile">
                            <div class="col-lg-12 col-sm-12 col-md-12 vela-col">
                                <h4><a href="#" id="action_profile" dataset="<?= $topics->user_id ?>"
                                       data-toggle="modal" data-target="#modal_profile"><?php echo $topics->name ?></a>
                                </h4>
                                <div class="address" title="<?php echo $topics->address ?>"><?php echo $topics->address ?>
                                    <i
                                        class="glyphicon glyphicon-map-marker">
                                    </i>
                                </div>

                                <p>
                                    <span class="contact">Liên hệ qua</span>
                                    <br/>
                                    <a data-target="#contact" data-toggle="modal" class="btn btn_purple">Email</a>
                                    <br/>
                                    <span class="contact">Hoặc gọi</span>
                                    <br/>

                                <div id="phone_area">
                                    <a onclick="getphone(<?= $topics->user_id ?>)"   class="btn btn_purple">Phone</a>
                                </div>

                                <br/>
                                <i class="glyphicon glyphicon-time"></i>
                                <?php echo Velacolib\Utility\Utility::time_stamp($topics->create_date); ?>
                                </p>
                                Lượt xem: <?= $topics->viewed ?>     <br/>    <br/>
                                <div style="clear: both"></div>

                                <ul class="tot" style="list-style: none;margin-bottom: 50px ;text-align: center;">
                                    <?php if ($topics->zalo == 1): ?>
                                        <li>
                                            <img alt="Zalo" src="/templates/front/images/logo_zalo.jpg">
                                        </li>
                                    <?php endif ?>
                                    <?php if ($topics->viber == 1): ?>
                                        <li>
                                            <img alt="viber" src="/templates/front/images/logo_viber.jpg">
                                        </li>
                                    <?php endif ?>
                                    <?php if ($topics->kakaotalk == 1): ?>
                                        <li>
                                            <img alt="Kakao Talk" src="/templates/front/images/logo_kakao.jpg">
                                        </li>
                                    <?php endif ?>
                                </ul>
                                <div style="clear: both"></div>
                            </div>

                            <div class="col-lg-12 col-sm-12 col-md-12">
                                <?php if ($viewed_products != false): ?>
                                    <?php foreach ($viewed_products as $viewed_item): ?>
                                        <a style="font-weight: 700" href="/raovat/chitiet/<?php echo $viewed_item['slug'] ?>/<?=$viewed_item['id']?>"><h1  style="font-weight: 700" class="related_title"
                                            title="<?= $viewed_item['title'] ?>"><?= $viewed_item['title'] ?></h1> </a>
                                        <div style="">
                                <a href="/raovat/chitiet/<?php echo $viewed_item['slug'] ?>/<?=$viewed_item['id']?>">  <img style="width: 70%" src="<?=$viewed_item['thumb']?>" />    </a>
                                            </div>
                                        <h5 class="related_price">
                                            <?php
                                            $price =      $utility::showPrice($viewed_item['price'],$viewed_item['show_price']);
                                            echo $price;
                                            ?>
                                        </h5>
                                    <?php endforeach; ?>
                                <?php endif; ?>
                            </div>
                        </div>


                    </div>
                </div>


            </div>
        </div>
    </div>
    <!-- topic detail -->


    <div class="row vela-col">
        <div class="col-lg-9 col-sm-9 col-md-9 vela-col">




            <!-- start comment

            <div class="fb-comments" style="margin-top: 20px" data-href="" data-numposts="30" data-order-by="reverse_time"
                 data-width="730" data-colorscheme="light">
            </div>
             end comment -->

        </div>
        <!-- left -->
        <div class="col-lg-3 col-sm-3 col-md-3 vela-col" style="text-align: center">

        </div>
        <!-- sidebar right -->
    </div>
    </div>
    <!-- modal form contact -->
    <div class="modal fade" id="contact" tabindex="-1" role="dialog" aria-labelledby="contactLabel" aria-hidden="true">

        <div class="modal-dialog">
            <div class="panel panel-primary">
                <div class="panel-heading">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                    <h4 class="panel-title" id="contactLabel"><span
                            class="glyphicon glyphicon-send"></span> <?= $topics->name ?> </h4>
                </div>
                <form action="/raovat/email-to-author" id="email_to_author" method="post" accept-charset="utf-8">
                    <div class="modal-body" style="padding: 5px;">
                        <div class="row">
                            <div class="col-lg-12 col-md-12 col-sm-12" style="padding-bottom: 10px;">
                                <input class="form-control" name="name"
                                       placeholder="<?= $translator->translate('Name') ?>" type="text" required/>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-lg-12 col-md-12 col-sm-12" style="padding-bottom: 10px;">
                                <input class="form-control" name="email" placeholder="Email" type="email" required/>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-lg-12 col-md-12 col-sm-12" style="padding-bottom: 10px;">
                                <input class="form-control" name="subject" placeholder="" type="text" required
                                       value="<?= $topics->title ?>"/>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-lg-12 col-md-12 col-sm-12">
                                <textarea style="resize:vertical;" class="form-control"
                                          placeholder="<?= $translator->translate('Content') ?>" rows="6" name="content"
                                          required></textarea>
                            </div>
                            <input type="hidden" name="recipient_name" value="<?= $topics->name ?>">
                            <input type="hidden" name="recipient_email" value="<?= $topics->email ?>">
                        </div>
                    </div>
                    <div class="panel-footer" style="margin-bottom:-14px;">
                        <input type="submit" class="btn btn_purple" value="<?= $translator->translate('Send') ?>"/>
                        <!--<span class="glyphicon glyphicon-ok"></span>-->
                        <input type="reset" class="btn btn_purple" value="Reset"/>
                        <!--<span class="glyphicon glyphicon-remove"></span>-->
                        <button style="float: right;" type="submit" class="btn btn-default btn-close"
                                data-dismiss="modal"><?= $translator->translate('Close') ?></button>
                    </div>
                </form>
            </div>
        </div>
    </div>
    <!-- end modal form contact -->

    <div class="modal fade" id="modal_profile" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
         aria-hidden="true">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                    <h4 class="modal-title" id="myModalLabel"><img class="user_avatar"
                                                                   src="<?= $topics->avatar ?>"/>  <?= $topics->name ?>
                        <small><?= $topics->address ?></small>
                    </h4>
                </div>
                <div class="modal-body" id="content_usertopic">
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div> <!-- #/myModal -->
    </div>


    <script type="text/javascript" src="<?php echo $this->basePath(); ?>/templates/front/js/masonry.js"></script>
    <script type="text/javascript"
            src="<?php echo $this->basePath(); ?>/templates/front/js/masonry.pkgd.min.js"></script>
    <script>
        function getphone(id) {
           $('#phone_area a').text('Đang xử lý....');
            $.ajax({
                type: 'post',
                url: '/raovat/creImagePhone',
                dataType: 'html',
                data: {id: id},
                success: function (data) {
                    var img = '<img src="/img/phone/' + data + '" />';
                    $("#phone_area").html("");
                    $("#phone_area").append(img);
                }
            })
        }
        ;
    </script>
    <script type="text/javascript">

        $("form#email_to_author").submit(function () {
            var formName = $(this).attr('name');

            $.ajax({
                url: $(this).attr('action'),
                type: 'POST',
                data: $(this).serialize(),
                dataType: 'html',
                beforeSend: function () {
                    $(".loading").show();
                },
                success: function (response) {
                    //alert(response);
                    $(".loading").hide();
                    response = JSON.parse(response);
                    console.log(response);
                    jsuccess(response.message);
                    $("#contact").modal('hide');


                },
                error: function () {

                    jerror('Request timeout');
                }

            });
            return false;
        });


        function uptin(id_tin) {
            $.ajax({
                type: 'post',
                url: '/raovat/uptopic',
                dataType: 'html',
                data: {id: id_tin},
                beforeSend: function () {

                }, success: function (response) {
                    response = JSON.parse(response);
                    if (response.result) {
                        jsuccess(response.message);
                    } else {
                        jerror(response.message);
                    }
                }
            })

        }
        ;
        $(document).ready(function () {

            $("#owl-demo").owlCarousel({
                items: 4,
                lazyLoad: true,
                navigation: false
            });

        });
        $(window).load(function () {
            var container = document.querySelector('#row_topic');
            var msnry = new Masonry(container, {
                // options
                itemSelector: '.tp-img-item'

            });

            $("a[rel=example_group]").fancybox({

                openEffect: 'none',
                closeEffect: 'none',

                prevEffect: 'none',
                nextEffect: 'none',

                closeBtn: false,

                helpers: {
                    title: {
                        type: 'inside'
                    },
                    buttons: {
                        position: 'bottom'
                    }
                }

                /*  onClosed: function() {
                 $('body').css('background',"#eee url('../images/b5.png') repeat");
                 }   */
            });

            /* ajax user profile */
            $(document).on("click", '#action_profile', function () {
                var datasend = $(this).attr('dataset');
                $.ajax({
                    type: 'post',
                    url: '/raovat/getTopicOfUser',
                    dataType: 'html',
                    data: {data: datasend},
                    beforeSend: function () {

                    },
                    success: function (response) {
                        response = JSON.parse(response);
                        $.each(response, function (key, val) {
                            console.log(val);
                            var user_topic = '<div class="row vela-topic-item">' +
                                '<div class="col-lg-2 col-sm-2 col-md-2  topic-image hidden-xs"> ' +
                                '<img class="topic_feature_image" src="' + val.images + '"> ' +
                                '</div>' +
                                ' <div class="col-lg-10 col-sm-10 col-md-10">' +
                                '<div class="topic-title"><a href="/raovat/chitiet/' + val.slug + '">' + val.title + '</a></div> ' +
                                '<div class="topic-info"><span class="price">' + val.price + ' vnd</span> <span class="time pull-right">' + val.create_date + '</span>' +
                                '</div>' +
                                '<div class="category"><a href="" class="text-info">' + val.cate_title + '</a></div> ' +
                                '</div>' +
                                '</div>';
                            $("#content_usertopic").append(user_topic);
                        });
                    },
                    error: function () {
                        jerror('Request timeout');
                        $(".overlay-loading").fadeOut(1000);
                    }
                })
            });
        });
    </script>
<?php endif ?>
